<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>客服SOP</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/hyqcss/public.css">
	<link rel="stylesheet" href="/fission/css/common.css">
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		}
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
		}
		.public_buttonSearch_container{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			background: #fff;
		}
		.public_buttonSearch_container a{
			color: #fff;
			background-color: #1e9fff;
			text-shadow: 0 -1px 0 rgba(0,0,0,.12);
			height: 24px;
			padding: 4px 15px;
			font-size: 14px;
			border-radius: 2px;
			display: flex;
			align-items: center;
			cursor: pointer;
		}
		.public_Search_container{
			position: relative;
		}
		.public_Search_container input{
			width: 240px;
			height: 32px;
			border: 1px solid #d9d9d9;
		}
		.public_Search_container i{
			position: absolute;
			bottom: 6px;
			right: 10px;
			cursor: pointer;
		}
		/*公共头部带搜索 end*/
		.public_table_container{
			padding: 0 20px 20px 20px;
		}
	</style>
</head>
<body>
	<!-- 顶部提示框 开始 -->
	<div class="public_tipSetting_contaienr">
		<div class="public_tipSetting_content">
			<p>SOP功能说明：只有在智能助手模式下，才可使用SOP功能</p>
		</div>
	</div>
	<div class="public_container">
		<!-- /*公共头部带搜索*/ -->
		<div class="public_content">
			<div class="public_title_container">
				<p>客服SOP</p>
			</div>
			<div class="public_buttonSearch_container">
				<a href="add_sop.html">创建规则</a>
				<div class="public_Search_container">
				<form class="layui-form client-filter" action="">
					<input type="text" name="title" required  lay-verify="required" placeholder="输入要搜索的名称" autocomplete="off" class="layui-input">
					<button lay-submit lay-filter="" style="float:right;margin-top: -4px;border: none;"><i class="layui-icon layui-icon-search" ></i></button>
				</form>
				</div>
			</div>
		</div>
		<!-- /*公共头部带搜索*/ end -->
		<!-- 公共表格部分 -->
		<form class="layui-form">
			<div class="public_table_container">
				<table class="layui-table" lay-skin="line">
					<thead>
						<tr>
							<th>名称</th>
							<th>类型</th>
							<th>创建时间</th>
							<th>发送规则</th>
							<th>操作</th>
						</tr> 
					</thead>
					<tbody>
						{loop $sop_list as $sop}
						<tr>
							<td>{$sop["name"]}</td>
							<td>{$type[$sop["type"]]}</td>
							<td>{date('Y-m-d H:i:s',$sop['ctime'])}</td>
							<td>{if $sop["set_time"]==1}距离会话结束{json_decode($sop["times"],1)['x']}小时{json_decode($sop["times"],1)['f']}分钟{else}开启会话后{json_decode($sop["times"],1)['x']}小时{json_decode($sop["times"],1)['f']}分钟{/if}</td>
							<td>
								<a type="button" class="table-public-btn" onclick="addusers({$sop['id']})">添加员工</a>
								<a type="button" class="table-public-btn" onclick="del_sop({$sop['id']})">删除</a>
								<a href="add_sop-{$sop['id']}.html" class="table-public-btn" >修改</a>
								<!-- <a href="sop_xq-{$sop->id}.html" class="table-public-btn" >详情</a> -->
							</td>
						</tr>
						{/loop}
					</tbody>
				</table>
			</div>
		</form>
		<!-- 公共表格部分 end-->
		<div class="main-container-h pageing-container-h">
	        <div class="pageing-content-h">
	           <span>{$p->totalnum}条/{$p->totalpage}页</span> 
	        </div>
			<ul class="pageing-content-h">
	           {P weidogsadmin}
			</ul> 
	    </div>
		<!-- 公共表格部分 end-->
	</div>
	<div class="layui-form" id="updateDiv" style="display: none;padding: 30px;" >
		<form id="updateUser" class="layui-form">
			<input type="hidden" name="sopId" id="sopId" value="">
			<div class="">
				<div class="allocation-clue-div">
		          <h2 class="" style="text-align: center; font-size: 20px; font-weight: bold; padding-bottom: 20px;"> 编辑接待人员 </h2>
		          <div class="layui-form-item">
		              <label class="layui-form-label">选择员工:</label>
		              <div class="layui-input-block">
		                <span class="layui-btn layui-btn-primary" id="addPeople">+ 前往添加</span>
		              </div>
		              <input type="hidden" name="checkUser" id="selectedhx"/>
		              <div id="selectedhxCon"></div>
		          </div>
		        </div>
			</div>	
			<div class="" style="display: flex; justify-content: flex-end;">
	          <button id="" type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="parent.layer.closeAll()" style=""> 取消</button>
	          <a id="" type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="updateUser" style=""> 确定</a>
	        </div>
		</form>
	</div>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		// 弹窗
		layui.use(['element', 'layer', 'form'], function () {
			var layer = layui.layer;
			var form = layui.form;

				// 表单
			form.on('submit(updateUser)',function(data){
		        if(data.field.checkUser == ''){
		          layer.msg('请选择员工'); return;
		        }
		        var formDataUpdate = $('#updateUser').serialize();
		        myAjaxPost(false, true, 'update_sop.html', formDataUpdate, function (resp) {
		            console.log(resp);
		          if (resp.status == 'success') {
		            layer.msg(resp.msg);
		            setTimeout(function(){
		              //parent.layer.closeAll('iframe');
		              location.reload();
		            },500);
		          }else{
		            layer.msg(resp.msg);
		          }
		        });
	      	})
		}); 
		
	</script>
	<script type="text/javascript">
		layui.use(['form'], function(){
		var form = layui.form,layer = layui.layer
		  //监听指定开关
		form.on('switch(switchTest)', function(data){
			var id = $(this).data('value');
		    if(this.checked){
		    	myAjaxPost(false, true, 'sop_status_k.html', { id:id}, function (resp) {
		    		if(resp.status == "success"){
		    			layer.msg(resp.msg);
		    		}
		    		layer.msg(resp.msg);
		    	})
		    }else{
		    	myAjaxPost(false, true, 'sop_status.html', { id:id}, function (resp) {
		    		if(resp.status == "success"){
		    			layer.msg(resp.msg);
		    		}
		    		layer.msg(resp.msg);
		    	})
		    }
		   });
		});
		function del_sop(id){
			myAjaxPost(false, true, 'del_sop.html', { id:id}, function (resp) {
	    		if(resp.status == "success"){
	    			layer.msg(resp.msg);
	    			setTimeout(function(){
	                    location.reload();
	                },500);
	    		}
	    		layer.msg(resp.msg);
	    	})
		}

		function addusers(id){
			$("#sopId").val(id);
			$("#selectedhx").val('');
			$("#selectedhxCon").empty();
			layer.open({	
				title: [' ', 'font-weight:bold;'],
		        type: 1,
		        area: ['700px', '300px'],
		        shadeClose: true,
	        	content: $('#updateDiv')
			});
		}

		$('#addPeople').on('click',function(){
		  var id = $("#sopId").val();
	      layer.open({
	        type: 2,
	        title: '添加员工',
	        shadeClose: true,
	        shade: 0.2,
	        area: ['700px', '600px'],
	        content: 'selectuser.html?id='+id
	      }); 
	    })


		function search(){
			var name = $("#title").val();
			myAjaxPost(false, true, '', { name:name}, function (resp) {
				console.log(resp);
			})
		}
	</script>
</body>
</html>